

<template>
    <div class="ucourse-warp">
        <div class="ucourse-top flex">
            <div class="ucourse-top-left flex">
                <img src="http://img.uuuda.com/wxapp/calendar-logo.png"  class='calendar-logo'>
                <div class='show-time' @click="toShow">{{result}}</div>
                <img src="http://img.uuuda.com/wxapp/ucourse-arrow.png"  class='ucourse-arrow'>

            </div>
            <!-- <div class="ucourse-top-right">我的U搭历程</div> -->
        </div>
        <div class='ucourse-notice' v-show="showNotice">{{notice_val}}</div>
        <!-- 收支明细盒子 -->
        <div class='balance-pay-box'>
            <div class='balance-pay-title'>收支明细</div>
            <!-- 收入支出盒子 -->
            <div class='balance-paybtn-box flex'>
                <div class="balance-paybtn" style='border-right:none;'  :class="{balance_paybtn_cur: balance_pay_index == 1}"  @click="balancePay(1)">收入</div>
                <div class="balance-paybtn " :class="{balance_paybtn_cur: balance_pay_index == 0}"   @click="balancePay(0)">支出</div>
            </div>
            <!-- 总收入盒子 -->
            <div class='ucourse-price-box'>
                <p class='ucourse-total'>￥{{totalPrice}}</p>
                <p class='ucourse-tip'>({{totalPriceVal}})</p>
            </div>
            <!-- 图表盒子 -->
            <div class='wx-charts-box' v-if="showWxcharts">
                <ve-pie :data="chartData"  height="300px" :loading="loading" :tooltip-visible='false' :legend-visible="false" :settings="chartSettings" ></ve-pie>
                 <div class="legendBox">
                     <div class="legend-cell ">
                         <div class="flex" >
                             <div v-for="item in legendArr" class="flex">
                                 <div class="legend-left-cell"
                                      :style="{background:item.color}"></div>
                                 <div class="legend-right-cell" >
                                     <div class="legend-right-title1">{{item.legendTitle}}</div>
                                     <div class="legend-right-title2">￥{{item.legendVal}}</div>
                                 </div>
                             </div>

                         </div>
                         <div class="flex">
                             <div class="legend-left-cell" style="background:#66B0FF"></div>
                             <div class="legend-right-cell">
                                 <div class="legend-right-title1">{{legendTitle}}</div>
                                 <div class="legend-right-title2">￥{{legendVal}}</div>
                             </div>
                         </div>


                       </div>
                 </div>

            </div>
            <!--暂无数据-->
            <div class="noDataBox" v-if="!showWxcharts">
                <img class="noDataImg" src="http://img.uuuda.com/wxapp/zwsjct.png">
                <p>暂无数据</p>
            </div>
        </div>
        <div class="ucourse-info-box">
            <div class="ucourse-info-tip">作为车主</div>
            <div  class="ucourse-info-cell">
                <div class="ucourse-info-cell-val">{{ud_passenger}}次</div>
                <div class="ucourse-info-cell-name">载客次数</div>
            </div>
            <div class="ucourse-info-cell-line"></div>
            <div  class="ucourse-info-cell">
                <div class="ucourse-info-cell-val">￥{{ud_passengerFare}}</div>
                <div class="ucourse-info-cell-name">收到车费</div>
            </div>

        </div>
        <div class="ucourse-info-box">
            <div class="ucourse-info-tip" style="background:rgba(25,121,255,1);">作为乘客</div>
            <div class="ucourse-info-cell">
                <div class="ucourse-info-cell-val">{{ud_number}}次</div>
                <div class="ucourse-info-cell-name">拼车次数</div>
            </div>
            <div class="ucourse-info-cell-line"></div>
            <div  class="ucourse-info-cell">
                <div class="ucourse-info-cell-val">￥{{ud_fare}}</div>
                <div class="ucourse-info-cell-name">支付车费</div>
            </div>


        </div>
        <!-- 收入支出盒子end -->
        <div class="ucourse-picker-box " >
                <div class='wx-mask' v-if="show"></div>

                <vue-pickers
                :show="show"
                :columns="columns"
                :defaultData="defaultData"
                :link="link"
                :selectData="pickData"
                v-on:cancel="close"
                v-on:confirm="confirmFn"></vue-pickers>
      </div>
    </div>

</template>

<script>
    let axios = require("axios");
    import vuePickers from 'vue-pickers'
    var colorList=[];//饼图的颜色数组
    export default {
        components: {
            vuePickers
        },
        data() {

            this.chartSettings = {
                radius: 78,
                offsetY: 150,
                dataType: 'percent',
                label:{
                    // width:10,
                    // length2:25,
                },
                itemStyle:{
                    normal: {
                        color: function(params) {
                            //饼图的颜色数组
                            colorList=[ '#C3D2D4', '#D4B567','#FF8080', '#66B0FF',]

                            return colorList[params.dataIndex]
                        },
                    }
                },

            };
            return {
                chartData: {
                    columns: ['日期', '访问用户'],
                    rows: [
                        { '日期': '小U', '访问用户': 0 },
                        { '日期': '小U', '访问用户': 0 },
                        { '日期': '小U', '访问用户': 0 },
                        { '日期': '小U', '访问用户': 0 },

                    ]
                },

                finMonthArr :[],//存放年渲染的数据
                result: 0,//展示选择的日期
                show: false,//时间组件的展示
                columns: 2, // 两列
                link: true, // 联动必须需要link 参数
                defaultData: [],
                //时间组件数据
                pickData: {
                    // 第一列数据结构
                    data1: [],
                    // 第二列数据结构
                    data2: [],
                },
                formData:{},//接口数据
                balance_pay_index:1,//收入支出的切换标识
                roleType:'',//1车主。0乘客
                totalPrice:0,//支出或者收入的总价
                totalPriceVal:'总收入',//支出或者收入的文案
                ud_number:0,//拼车次数
                ud_fare:0,//支付车费
                ud_passenger:0,//载客次数
                ud_passengerFare:0,//收到车费
                notice_val:'',
                showNotice:false,
                loading: false,
                legendArr:[],
                legendTitle:'',
                legendVal:'',
                showWxcharts:true,
                first:true


            }
        },
        created() {
        },
        mounted(){
            let M = (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1);
            let params=new Date().getFullYear()+'-'+M;
            self.first=true;
           this.initPage(params);
        },
        watch:{
        },
        methods: {
            //初始化页面
            initPage(dateVal){


                let self = this;
                let query = this.$route.query;
                let token = query.u || '';
                //1、当前时间戳
                let nowtime = Date.parse(new Date())/1000;
                //车主的U搭开始时间
                if(self.first){
                    self.result=new Date().getFullYear()+'年'+(new Date().getMonth()+1) +'月';
                }
                axios({
                    method: "POST",
                    url: "/api/user/statistical",
                    params: {
                      'token':token,
                      'date':dateVal
                    }
                }).then(function(res) {
                    let rdata = res.data;
                    if(rdata.errno == 200){

                        self.formData=rdata.data;//数据源
                        self.balance_pay_index=rdata.data.role;//根据角色默认选中 支出或收入
                        self.roleType=rdata.data.role;//根据角色默认选中 支出或收入
                        self.ud_number=rdata.data.number,//拼车次数
                        self.ud_fare=rdata.data.fare,//支付车费
                        self.ud_passenger=rdata.data.passenger,//载客次数
                        self.ud_passengerFare=rdata.data.passengerFare,//收到车费

                         //收入支出数据切换
                        self.balancePay(rdata.data.role);

                        //计算从U搭开始时间到现在的时间 区间
                        let time1=self.formatDate(new Date(rdata.data.cTime*1000))
                        let time2=self.formatDate(new Date(nowtime*1000))

                        if(self.first){
                            self.getMonthBetween(time1,time2)
                        }else {
                            self.defaultData = []

                        }

                    }else {
                        self.showWxcharts=false
                    }


                });
            },



    //根据角色切换收入支出数据及样式
            balancePay(id){
                let self=this;
                self.loading=true;
                self.balance_pay_index=id

                if(id==1){  //车主 收入
                    //判断是否有数据

                    if(self.formData.defaultReward <=0 && self.formData.passengerFare <=0
                        && self.formData.totalSubsidy <=0 && self.formData.withdrawalAmount <=0
                    ){
                        self.showWxcharts=false
                    }else {

                        self.showWxcharts=true
                    }

                    self.chartData.rows=[
                        { '日期': '违约补偿', '访问用户': self.formData.defaultReward },
                        { '日期': '收到车费', '访问用户': self.formData.passengerFare },
                        { '日期': '平台补贴', '访问用户': self.formData.totalSubsidy },
                        { '日期': '任务奖励', '访问用户': self.formData.withdrawalAmount },
                    ],
                        self.legendArr=[
                            {
                                legendTitle:'违约补偿',
                                legendVal:self.formData.defaultReward,
                                color:'#C3D2D4'
                            },
                            {
                                legendTitle:'收到车费',
                                legendVal:self.formData.passengerFare,
                                color:'#D4B567'
                            },
                            {
                                legendTitle:'平台补贴',
                                legendVal:self.formData.totalSubsidy,
                                color:'#FF8080'
                            }
                        ];
                        self.legendTitle='任务奖励',
                        self.legendVal=self.formData.withdrawalAmount,

                        self.totalPrice=self.formData.totalRevenue
                        self.totalPriceVal='总收入'
                        if(self.formData.totalSubsidy>0){
                            self.showNotice=true
                            self.notice_val='本月小U已累计奖励您'+self.formData.totalSubsidy +'元'
                        }else {
                            self.showNotice=false
                        }


                }else { //乘客 支出
                            //判断是否有数据
                            if(self.formData.deductions<=0 && self.formData.fare<=0
                                && self.formData.payTicket<=0  && self.formData.merchants<=0
                            ){
                                self.showWxcharts=false

                            }else {
                                self.showWxcharts=true
                            }
                            self.chartData.rows=[
                                { '日期': '违约扣款', '访问用户': self.formData.deductions },
                                { '日期': '车费支出', '访问用户': self.formData.fare },
                                { '日期': '购买卡券', '访问用户': self.formData.payTicket },
                                { '日期': '商户服务', '访问用户': self.formData.merchants },
                            ],
                            self.legendArr=[
                                {
                                    legendTitle:'违约扣款',
                                    legendVal:self.formData.deductions,
                                    color:'#C3D2D4'
                                },
                                {
                                    legendTitle:'车费支出',
                                    legendVal:self.formData.fare,
                                    color:'#D4B567'
                                },
                                {
                                    legendTitle:'购买卡券',
                                    legendVal:self.formData.payTicket,
                                    color:'#FF8080'
                                }

                            ];
                    self.legendTitle='商户服务',
                    self.legendVal=self.formData.merchants,

                    self.totalPrice=self.formData.totalFare
                    self.totalPriceVal='总支出';

                    if(self.formData.uRewardNumber>0){
                        self.showNotice=true
                        self.notice_val='本月小U已替您节省金额'+self.formData.uRewardNumber +'元'
                    }else {
                        self.showNotice=false
                    }


                }

            },

            formatDate(now) {
                let year=now.getFullYear();
                let month=now.getMonth()+1;
                let date=now.getDate();
                return year+"-"+month+"-"+date;
            },
            //或得起始时间区间的 全部时间

            getMonthBetween(value1, value2) {
                var arr=[];
                var getDate = function(str) {
                    var tempDate = new Date();
                    var list = str.split("-");
                    tempDate.setFullYear(list[0]);
                    tempDate.setMonth(list[1] - 1);
                    tempDate.setDate(list[2]);
                    return tempDate;
                }
                var date1 = getDate(value1);
                var date2 = getDate(value2);
                if (date1 > date2) {
                    var tempDate = date1;
                    date1 = date2;
                    date2 = tempDate;
                }
                date1.setDate(date1.getDate());
                var dateArr = [];
                var i = 0;
                while (!(date1.getFullYear() == date2.getFullYear()
                    && date1.getMonth() == date2.getMonth() && date1.getDate() == date2
                        .getDate()))
                {
                    dateArr[i] = date1.getFullYear() + "-" + (date1.getMonth() + 1);
                    date1.setDate(date1.getDate() + 1);
                    i++;
                }

                arr=dateArr;
                arr.push(value2);
                this.formatMonth([...new Set(arr)])
            },

            //对月份处理
            formatMonth: function (srcArr){
                let self = this;
                let resMonthArr = []
                let resYearArr= []//存放年
                let currentMonth

                for (let i = 0; i < srcArr.length; i++) {
                    let currentYear = srcArr[i].split("-")[0]
                    currentMonth = srcArr[i].split("-")[1]

                    if (resYearArr.indexOf(currentYear) < 0) { //这里是数据为空的时候 赋值
                        resYearArr.push(currentYear)
                        resMonthArr.push({
                            "year": currentYear,
                            "months": [{
                                'text':currentMonth +'月',
                                'value':currentMonth,
                            }]
                        })

                    } else {
                        for (let j = 0; j < resMonthArr.length; j++) {
                            if (resMonthArr[j].year == currentYear&& !self.hasRepeatValue(resMonthArr[j].months,currentMonth)) {
                                    resMonthArr[j].months.push({
                                        'text':currentMonth+'月',
                                        'value':currentMonth,
                                    })


                            }

                        }
                    }
                }

                let dataMonthArr=[]
                let finYearArr =[]//存放月份渲染的数据

                for(let k=0;k<resMonthArr.length;k++){
                    finYearArr.push({
                        "text": resMonthArr[k].year +'年',
                        "value": k,
                        'index':resMonthArr[k].year
                    });
                    dataMonthArr.push(resMonthArr[k].months);
                }
                finYearArr.push({
                    "text": "历史总计",
                    "value": resYearArr.length
                });
                dataMonthArr.push([])

                self.pickData.data1=finYearArr
                self.pickData.data2=dataMonthArr
                //组件数据源 年份数组 最后一条年份数据的索引
                let pickYearLength=self.pickData.data1.length-2;
                //组件数据源 月份数组 最后一条月份数据的索引
                let pickMonthLength=self.pickData.data2[pickYearLength].length-1;
                //默认选中 当前年月-赋值

                    self.defaultData = [
                        {
                            text: self.pickData.data1[pickYearLength].text,
                            value: pickYearLength,
                            index:self.pickData.data1[pickYearLength].index
                        },
                        {
                            text: self.pickData.data2[pickYearLength][pickMonthLength].text,
                            value: self.pickData.data2[pickYearLength][pickMonthLength].value
                        },
                    ]






            },
            //判断数据是否重复
            hasRepeatValue (arr,currentalue){
                let res=false//默认没有重复
                for(let i=0;i<arr.length;i++){
                    if(arr[i].value==currentalue){
                        res=true;
                        break;
                    }
                }
                return res
            },

            //选时间确认按钮
            confirmFn(val) {
                let self=this;

                let params=''
                self.show = false
                self.first=false
                if(val.select2){
                    self.result = val.select1.text+val.select2.text
                    self.pickData.default = [val.select1, val.select2]
                    let M = val.select2.value < 10 ? '0' + val.select2.value : val.select2.value;
                     params=val.select1.index+'-'+M;
                }else {
                    self.result = '历史总计';
                    params=''
                }
                self.initPage(params);

            },
            //弹出时间组件
            toShow() {
                this.show = true
            },
            //关闭时间弹窗
            close() {
                this.show = false
            },
        }
    }
</script>

<style>

    .ucourse-warp{
        position: relative;
        background:#f0f1f2;
        width: 100%;
        /* z-index:1000; */
        box-shadow: 0 0 16px rgba(0,0,0,0.05);

    }
    .flex{
        display: flex;
        align-items:center;

    }
    .ucourse-top{
        position: relative;
        padding:16px;
        z-index: 20000;
        background: #FFFFFF ;
    }

    .calendar-logo{
        position: relative;
        width: 14px;
        margin-right: 3px;
    }
    .ucourse-arrow{
        position: relative;
        width: 7px;
        margin-left: 8px;
    }
    .ucourse-top-left{
        flex: 1;
    }
    .ucourse-top-right{
        flex: 1;
        text-align: right;

    }
    .ucourse-picker-footer{
        position: relative;
        display: flex;
        border-top: 2px solid #ededed;
        border-bottom: 1px solid #ededed;
        margin-top:3px;

    }
    .ucourse-picker-footer .confirm{
        color: #0bb20c;
    }
    .picker-footer-btn{
        flex: 1;
        height: 40px;
        line-height: 40px;
        text-align: center;

    }
    .show-time{
        font-size: 16px;
        color: #2E3033;
        margin-left: 8px;
    }
    .ucourse-notice{
        position: relative;
        background: #1A8AFF;
        color: white;
        font-size: 14px;
        margin:12px;
        padding: 16px;
        border-radius: 2px;
    }
    .balance-pay-box{
        position: relative;
        margin: 12px;
        background: white;
    }
    .balance-pay-title{
        position: relative;
        color: #2E3033;
        font-size: 18px;
        font-weight: bold;
        padding: 16px;
        border-bottom: 1px solid #ededed;
    }
    .balance-paybtn-box{
        position: relative;
        margin-top: 16px;
        padding-bottom: 30px;
        justify-content:center;

    }
    .balance-paybtn{
        position: relative;
        font-size: 14px;
        color: #5C6166;
        border: 1px solid #dedede;
        padding: 8px 32px;
        background: white;

    }
    .balance_paybtn_cur{
        background: #1A8AFF;
        color: white;

    }
    .ucourse-total{
        position: relative;
        font-size: 32px;
        color: #2E3033;
        font-weight: bold;
        text-align: center;
        display: block;
    }
    .ucourse-tip{
        position: relative;
        font-size: 16px;
        color: #666666;
        text-align: center;
        display: block;
    }
   /*图表盒子*/
    .wx-charts-box{
        position: relative;
        /*background: red;*/
        /*height: 320px;*/
    }
    .wx-mask{
        position: fixed;
        /*z-index: 10;*/
        top: 0;
        height: 100%;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
    }
    .ucourse-info-box{
        position: relative;
        margin: 12px 12px 0px 12px;
        /*width: 94%;*/
        display: flex;
        overflow: hidden;
        background: white;
     align-items: center;

    }
    .ucourse-info-tip{
        position: absolute;
        top:0;
        left: 0;
        font-size:8px;
        display: block;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:8px;
        /*height:16px;*/
       padding: 4px 5px 4px 10px;
        background:rgba(71,77,102,1);
        border-radius:57px 0px 0px 57px;

    }
    .ucourse-info-cell-line{
        position: relative;
        width:1px;
        height:40px;
        background:rgba(237,237,237,1);
        border-radius:4px;
    }
    .ucourse-info-cell{
        display: flex;
        text-align: center;
        flex-wrap: wrap;
        height: 74px;
        flex: 1;
        /*width: 50%;*/
        /*float: left;*/
        /*border: 1px solid #ededed;*/
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .ucourse-info-cell-val{
        font-size: 20px;
        color: #2E3033;
        font-weight: bold;
    }
    .ucourse-info-cell-name{
        font-size: 14px;
        color: #8A9199 ;
    }
    .ucourse-picker-box{
        z-index: 1000;
    }
    .noDataBox{
        position: relative;
        text-align: center;
        font-size: 16px;
        color: #B5B5B5;
        padding: 24px 0;
    }
    .noDataImg{
        position: relative;
        display: block;
        width: 50px;
        height: 50px;
        margin: 0 auto;
    }
    .legend-cell{
        padding: 20px 30px;
        /*align-items: center;*/
    }
   .legend-left-cell{
       margin-right: 10px;
       width: 14px;
       height: 14px;
   }
   .legend-right-title1{
       font-size: 14px;
       line-height: 20px;
       color: #5C6166;
       position: relative;
       margin-top: 23px;
       /*margin-bottom: 5px;*/
   }
   .legend-right-cell{
       margin-right: 12px;
   }
    .legend-right-title2{
        font-size: 16px;
        font-weight: bold;
    }

    .area_ctrl{
        background: white!important;
    }
    .area_btn_box{
        background: white!important;

    }
    .larea_cancel{
        color:#999999!important;
    }



</style>


